<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>axios的create方法</title>
		<script type="text/javascript" src="./js/axios.min.js"></script>
	</head>
	<body>
		<button onclick="getHello()">获取欢迎信息</button>
		<button onclick="getAllPerson()">获取所有人</button>
		<button onclick="getJoke()">获取笑话信息</button>

		<script type="text/javascript" >
			/* 
					1.axios.create方法可以返回一个全新的axios
					2.这个全新的axios中的配置看create调用时传入的配置
					3.这个全新的axios有1个不足之处：
							这个全新的axios丢失了all方法。
							备注：其他的所有属性、方法等等均和正常的axios一致
			*/

			const a1 = axios.create({
				//修改axios默认配置项
				timeout:2000,
				headers:{school:'atguigu'},
				// cancelToken:new axios.CancelToken(c => c('trfyguhi')),
				baseURL:'http://localhost:5000'
			})

			const a2 = axios.create({
				//修改axios默认配置项
				timeout:10000,
				baseURL:'https://api.apiopen.top'
			})

			//获取欢迎信息
			function getHello(){
				a1({
					url:'/hello',
					method:'GET',
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)
			}

			//获取所有人
			function getAllPerson(){
				a1({
					url:'/persons',
					method:'GET',
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)
			}
			
			function getJoke(){
				a2({
					url:'/getJoke',
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)
			}
		</script>
	</body>
</html>